<script setup lang="ts">
import { reactive, ref } from 'vue';

interface Props {
  userList: Api.Auth.UserInfo[];
}
defineProps<Props>();

const formRef = ref();
const state = reactive({
  ruleForm: {
    id: '',
    name: '',
    userId: null,
    schoolYear: null,
    remark: '',
  },
  rules: {
    name: {
      required: true, message: '请输入班级名称', trigger: ['blur']
    }
  }
});
defineExpose({
  state,
  formRef
});
</script>

<template>
  <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
    <n-grid responsive="screen" item-responsive>
      <n-form-item-gi span="24" label="班级名称" path="name">
        <n-input v-model:value="state.ruleForm.name" placeholder="请输入班级名称" clearable></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="班主任" path="userId">
        <n-select v-model:value="state.ruleForm.userId" :options="userList" value-field="id" label-field="username" placeholder="请选择班主任" clearable></n-select>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="年级" path="schoolYear">
        <n-date-picker class="w-100%" v-model:value="state.ruleForm.schoolYear" type="year" placeholder="请选择入学年份" clearable></n-date-picker>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="备注" path="remark">
        <n-input v-model:value="state.ruleForm.remark" placeholder="请输入备注" clearable></n-input>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<style scoped>

</style>
